<template>
  <view class="max">
    <view class="menu-list disb aic" v-for="item,index in columnslist" :key="index">
      <text style="width: 35%" v-if="item.className!='null'">{{item.className?item.className:''}}</text>
      <view class="disp aic" style="text-align: right;width: 50%;" @click="click(index,item.category,item)">





        <view style="width: 100%;" >

          <view class="input-container">
            <u-input placeholder="请输入内容" border="surround" fontSize='12' inputAlign='right'
                     v-if="item.category==0 || item.category==203|| item.category==204"
                     v-model="item.resultValue">
            </u-input>

            <u-input placeholder="请输入内容" border="surround" fontSize='12' inputAlign='right' v-if="item.category==1 || item.category==2"
                     @input="onInput(item.category)"
                     v-model="item.resultValue">
            </u-input>
            <!--            <u-input placeholder="请输入内容" border="surround" fontSize='12' inputAlign='right' v-if="item.category==203 || item.category==204"-->
            <!--                     v-model="item.resultValue">-->
            <!--            </u-input>-->
            <view class="i-text" v-if="item.category==0 || item.category==203 || item.category==204">
              <view v-if="item.units && item.units!=null && item.units!=undefined">
                {{item.units}}
              </view>
            </view>
          </view>


          <!--  输入-数据     -->
          <view style="position: absolute;margin-left: 10%;"  v-if="item.category!=0 && item.category!=1 && item.category !=-1
             && item.category !=2 && item.category !=-2 && item.category !=200 && item.category !=201
             && item.category != 203 && item.category != 204 && item.category != 301">
            {{item.resultValue?item.resultValue:''}}
          </view>

          <!--  选项旁边-数据     -->
          <!--          <view style="position: absolute;margin-top: -10px;"  v-if="item.category==13 || item.category==14 || item.category==115 || item.category==99 ">-->
          <!--            {{item.resultValue?item.resultValue:''}}-->
          <!--          </view>-->

          <view v-if="item.category==-1">
            <u-input v-model="totalTj"
                     readonly border="surround" fontSize='12' inputAlign='right'>
            </u-input>
          </view>

          <view v-if="item.category==-2">
            <u-input v-model="totalTjTwo"
                     readonly border="surround" fontSize='12' inputAlign='right'>
            </u-input>
          </view>

          <view v-if="item.category==200" class="input-container">
            <u-input v-model="item.param1"
                     placeholder="请输入数字" border="surround" fontSize='12' inputAlign='right'>
            </u-input>
            <view class="i-text" v-if="item.units">
              {{item.units}}
            </view>
          </view>

          <view class="input-container" v-if="item.category==201" >
            <u-input  label="连续逾期" placeholder="连续逾期（数字）" border="surround" fontSize='12' inputAlign='right'
                      v-model="item.param1">
            </u-input>

            <u-input  label="累计逾期" placeholder="累计逾期（数字）" border="surround" fontSize='12' inputAlign='right'
                      v-model="item.param3">
            </u-input>
            <view class="i-text" v-if="item.units">
              {{item.units}}
            </view>
          </view>

          <!--    箭头     -->
          <view style="width: 100%;" v-if="item.category!=0 && item.category!=1 && item.category !=-1 && item.category !=200 && item.category !=201
           && item.category != 203 && item.category != 204 && item.category !=2  && item.category !=-2 && item.category !=301 "  >
            <image class="right" src="../../static/images/preat/right.png" mode=""></image>
          </view>

          <view v-if="item.category==301">
            <text class="value" @tap="showMultiple = true">{{infoMultiple || "请选择"}}</text>
          </view>

        </view>


      </view>
    </view>

    <u-picker v-if="gettype != 14"  :show="show" :immediateChange="true" :columns="questionList"
              @confirm="sexSelect" @cancel='show=false' closeOnClickOverlay @close='show=false'>
    </u-picker>

    <!--	 <u-picker mode='multiSelector' v-if="gettype == 14" :show="show" :columns="questionList" @confirm="sexSelect"-->
    <!--			@cancel='show=false' keyName="value" closeOnClickOverlay @close='show=false'></u-picker>-->

    <div>
      <view class="text-area">
<!--        <text class="label">银行/机构已选中项目：</text>-->
<!--        <text class="value" @tap="showMultiple = true">{{infoMultiple || "请选择"}}</text>-->
<!--        <text class="value" @tap="showMultiple = true">{{infoMultiple}}</text>-->
      </view>
      <multiple-select v-model="showMultiple" :data="listMultiple" :default-selected="defaultSelected"
                       @confirm="confirmMultiple"></multiple-select>
    </div>

    <view class="Btn tac fz12 colorf" @click="create">保存</view>
  </view>
</template>

<script>
import {
  getPublicitySelectListByTypesName,
  createInform
} from "../../api/information.js"
import UText from "../../uni_modules/uview-ui/components/u-text/u-text.vue";
import UInput from "../../uni_modules/uview-ui/components/u--input/u--input.vue";
import multipleSelect from "@/components/momo-multipleSelect/momo-multipleSelect";

export default {
  components: {UInput, UText , multipleSelect},
  data() {
    return {
      // 多选
      showMultiple: false, //是否显示 - 双向绑定
      infoMultiple: "",
      listMultiple: [], //数据源
      defaultSelected: [], //默认选中项

      show: false,
      select: null,
      orderId: null,
      totalTj: 0,
      totalTjTwo: 0,
      columnslist: [{
        param1:'',
        param3:'',
        untis:'',
        category:'',
        resultValue:'',
        className:''
      }],
      ageValue: '',
      sexValue:'',
      columns:[],
      typesName: '',
      questionList: [],
      gettype: 0
    };
  },
  onLoad(option) {
    this.orderId = option.orderId
    if (option.id == 1) {
      this.typesName = '完成按揭房信贷公式表'
      uni.setNavigationBarTitle({
        title: '按揭房信资料'
      })
    }
    if (option.id == 2) {
      this.typesName = '完成保单贷公式表'
      uni.setNavigationBarTitle({
        title: '保单资料'
      })
    }
    if (option.id == 3) {
      this.typesName = '完成个人贴息贷款公式表'
      uni.setNavigationBarTitle({
        title: '个人贴息资料'
      })
    }
    if (option.id == 4) {
      this.typesName = '完成工薪贷公式表'
      uni.setNavigationBarTitle({
        title: '工薪资料'
      })
    }
    if (option.id == 5) {
      this.typesName = '完成公积金贷公式表'
      uni.setNavigationBarTitle({
        title: '公积金资料'
      })
    }
    if (option.id == 6) {
      this.typesName = '完成企业贴息贷款公式表'
      uni.setNavigationBarTitle({
        title: '企业贴息资料'
      })
    }
    if (option.id == 7) {
      this.typesName = '完成全款车按揭车信贷公式表'
      uni.setNavigationBarTitle({
        title: '车辆信贷资料'
      })
    }
    if (option.id == 8) {
      this.typesName = '完成商业商住楼写字楼厂房一抵押公式表'
      uni.setNavigationBarTitle({
        title: '商业商住楼写字楼厂房一抵押资料'
      })
    }
    if (option.id == 9) {
      this.typesName = '完成商业商住楼写字楼二次抵押公式表'
      uni.setNavigationBarTitle({
        title: '商业商住楼写字楼二次抵押资料'
      })
    }
    if (option.id == 10) {
      this.typesName = '完成商业写字楼按揭贷款公式'
      uni.setNavigationBarTitle({
        title: '商业写字楼按揭资料'
      })
    }
    if (option.id == 11) {
      this.typesName = '完成税贷公示表'
      uni.setNavigationBarTitle({
        title: '企业税资料'
      })
    }
    if (option.id == 12) {
      this.typesName = '完成企业流水贷公式表'
      uni.setNavigationBarTitle({
        title: '企业流水资料'
      })
    }
    if (option.id == 13) {
      this.typesName = '完成企业发票贷公式表'
      uni.setNavigationBarTitle({
        title: '企业发票资料'
      })
    }
    if (option.id == 14) {
      this.typesName = '完成住宅按揭贷款公式表'
      uni.setNavigationBarTitle({
        title: '住宅按揭资料'
      })
    }
    if (option.id == 15) {
      this.typesName = '完成住宅抵押公式表'
      uni.setNavigationBarTitle({
        title: '住宅抵押资料'
      })
    }
    if (option.id == 16) {
      this.typesName = '完成住宅二次抵押公式表'
      uni.setNavigationBarTitle({
        title: '住宅二次抵押资料'
      })
    }
    this.getMessage();

  },
  onShow() {
    // 模拟多选框异步数据
    // setTimeout(() => {
    // }, 1000);
  },
  methods: {
    onInput(n) {
      console.log(n)
      var sum = 0;
      var sumTwo = 0;
      if (n=='1' || n==1) {
        this.columnslist.forEach(v => {
          if (v.category=='1') {
            var number = Number(v.resultValue)
            if (isNaN(number)) {
              uni.$u.toast('请输入数字')
              // console.log("ss")
            }else {
              sum += number
            }
          }
        })
        this.totalTj = sum
      }else if (n=='2' || n==2) {
        this.columnslist.forEach(v => {
          if (v.category=='2') {
            var number = Number(v.resultValue)
            if (isNaN(number)) {
              uni.$u.toast('请输入数字')
              // console.log("ss")
            }else {
              sumTwo += number
            }
          }
        })
        this.totalTjTwo = sumTwo
      }

    },
    getMessage() {
      getPublicitySelectListByTypesName({
        typesName: this.typesName,
        orderId: this.orderId
      }).then(res => {
        res.data.forEach(v => {
          if (v.category == '0') {
            v.status = false
          }else if (v.category == -1){
            this.totalTj = v.resultValue
          }else if (v.category == -2){
            this.totalTjTwo = v.resultValue
          }else if (v.category == 301){
            this.infoMultiple = v.resultValue
          }else{
            v.status = true
          }
        })
        this.columnslist = res.data
      })
    },
    click(i, typeindex,item) {
      if (typeindex!=0 && typeindex!=1  && typeindex !=-1 && typeindex!=2  && typeindex !=-2
          && typeindex !=200 && typeindex !=201 && typeindex !=203 && typeindex !=204 && typeindex !=301){
        this.select = i
        this.show = true
        this.gettype = typeindex
        //let parmas = {className:name,typesName:this.typesName}
        // getformula(typeindex).then(res => {
        //   this.questionList = [res.data.data] //res.data.data
        //   console.log(this.questionList)
        // })
        var list = item.admittanceUser
        list = item.admittanceUser.split(',')
        this.questionList = [list]
        //console.log(this.questionList)
      }else if (typeindex==301){
        if (this.listMultiple.length<=0){
          var list = item.admittanceUser
          list = item.admittanceUser.split(',')
          this.defaultSelected = this.infoMultiple.split(',')
          // var banks = []
          // var list2 = this.infoMultiple.split(',')
          // banks = list.map(bank => {
          //   return {
          //     label: bank,
          //     value: bank,
          //     disabled: false,
          //     selected: list2.includes(bank)
          //   };
          // });
          // this.listMultiple = banks
          for (i = 0; i < list.length; i++) {
            let values = {label:list[i],value:list[i],disabled:false}
            this.listMultiple.push(values)
          }
        }
      }
    },
    sexSelect(e) {
      this.show = false
      this.columnslist[this.select].resultValue = e.value[0]
    },
    //保存
    create() {
      this.columnslist.forEach(v => {
        let value = '';
        if (v.category == -1) {
          value = this.totalTj
        }else if (v.category == -2) {
          value = this.totalTjTwo
        }else if (v.category == 200) {
          value = v.param1
          v.param1 = v.param1
        } else if (v.category == 201) {
          value = v.param1 +'-'+v.param3
          v.param1 = v.param1
          v.param3 = v.param3
        } else if (v.category == 301) {
          value = this.infoMultiple
        } else{
          if (v.resultValue!=null && v.resultValue!='null' && v.resultValue!='' && v.resultValue!=undefined){
            if (Array.isArray(v.resultValue)){
              value = v.resultValue[0]
            }else {
              value = v.resultValue
            }
          }
        }
        v.category = v.category
        v.pid = v.id?v.id:v.pid
        v.orderId = this.orderId
        v.typeName = this.typesName
        v.resultValue = value
        v.categoryName = v.className
        v.untis = v.untis
        v.isPassed = "1"
        // delete v.category
        // delete v.remark
        // delete v.status
        // delete v.typeNames
        // delete v.className
      })

      let parmas = {
        orderId: this.orderId,
        voList: this.columnslist
      }
      createInform(parmas).then(res => {
        if (res.code == 0) {
          uni.$u.toast('保存成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        } else {
          uni.$u.toast(res.msg)
        }
      })
    },

    // 多选确定事件
    confirmMultiple(data) {
      console.log(data);
      this.infoMultiple = data.map((el) => el.label).join(",");
      //console.log(this.infoMultiple);
    },
  }
}
</script>

<style lang="scss">
.max {
  padding: 10rpx 0;
}

.opt13 {
  position: absolute;
  right: 20rpx;
  top: 0;
  width: 200rpx;
  height: 100%;
  //z-index: 13;
}

.opt14 {
  position: absolute;
  right: 20rpx;
  top: 0;
  width: 200rpx;
  height: 100%;
  //z-index: 14;
}

.menu-list {
  padding: 20rpx 30rpx;
  margin: 5rpx 0;
  background-color: #fff;
  font-size: 12px;
  position: relative;

  .changeUserImage {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;

    .userPic {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
  }

  .content {
    width: 200rpx;
    text-align: right;
  }

  .right {
    width: 20rpx;
    height: 30rpx;
    margin-left: 20rpx;
  }

  .colorc {
    color: #d6d6d6;
  }

  .nickname {
    text-align: right;
  }
}

.Btn {
  width: 80%;
  line-height: 80rpx;
  margin: 40rpx auto;
  border-radius: 40rpx;
  background-color: #3F51B5;
}

.input-container {
  display: flex;
  justify-content: space-between; /* 或者使用其他对齐方式 */
}
.i-text{
  margin-top: 10px;
}
// 多选
.text-area {
  width: 100%;
  // margin-top: 5vh;
  display: flex;
  // justify-content: center;
  font-size: 24rpx;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
}
.value {
  color: #2088f9;
}
.title {
  text-align: center;
  font-size: 24rpx;
  color: #2088f9;
  margin-top: 20vh;
}
.v-select{
  float: right;
  font-size: 0.8rem;
  color: #2196F3;
}
</style>